import { createApp, ref } from 'vue'
import musicAudio from './musicAudio.vue'

type AudioComponentInstance = InstanceType<typeof musicAudio>

export const audioPlay = (audioSrc: string): AudioComponentInstance => {
  // 查找现有的音频播放器元素
  const existingPlayer = document.querySelector('.audio-player') as HTMLElement | null

  // 如果已经有播放器并且音频源相同，则返回当前的组件实例
  if (existingPlayer && existingPlayer.dataset.src === audioSrc) {
    // 这里不再使用 __vue__，而是通过 ref 来获取组件实例
    const existingComponent = (existingPlayer as any).__vueApp__?.config.globalProperties.$refs?.audioComponent
    if (existingComponent) {
      return existingComponent
    }
  }

  // 如果已经有播放器，先移除它
  if (existingPlayer) {
    existingPlayer.remove()
  }

  // 创建新的播放器元素
  const audioEle = document.createElement('div')
  audioEle.classList.add('audio-player') // 添加唯一标记 class
  audioEle.dataset.src = audioSrc // 使用自定义属性存储音频源

  // 创建 Vue 实例并挂载
  const app = createApp(musicAudio, { audioSrc })

  // 通过 ref 获取音频组件实例
  const audioComponentRef = ref<AudioComponentInstance | null>(null)

  // 挂载组件时，绑定 audioComponentRef
  app.component('MusicAudio', musicAudio)
  const audioComponent = app.mount(audioEle)

  // 将音频组件实例绑定到 ref
  audioComponentRef.value = audioComponent as AudioComponentInstance

  // 将新的播放器元素添加到 body 中
  document.body.appendChild(audioEle)

  // 返回音频组件实例
  return audioComponentRef.value!
}
